<template>
	<view class="content">
		<u-navbar fixed title="上报" :autoBack="true"></u-navbar>
		<view class="inner-content">
			<view class="item-content" v-for="(it,i) in list" :key="`item_${i}`">
				<view class="item-title">
					{{ it.title }}
				</view>
				<view class="item-children">
					<view class="item-name" v-for="(it2,i2) in it.children" :key="`item_name_${i2}`">
						<u-button :text="it2.label" @click="goto"></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				list: [{
					title: "医疗相关",
					children: [{
						label: "手术事件"
					}, {
						label: "麻醉事件"
					}, {
						label: "诊疗相关事件"
					}, {
						label: "给药差错事件"
					}]
				}, {
					title: "医疗相关",
					children: [{
						label: "手术事件"
					}, {
						label: "麻醉事件"
					}, {
						label: "诊疗相关事件"
					}, {
						label: "给药差错事件"
					}]
				}]
			}
		},
		onLoad(options) {
			// if (options.id) {
			// 	this.getMsgDetail(options.id)
			// }
		},
		methods: {
			//获取消息详情
			getMsgDetail(id) {
				const userId = this.$store.getters?.userInfo?.id
				uni.showLoading({
					title: '加载中...'
				})
				getMsgDetail(userId, id).then(res => {
					this.data = res.data
					console.log(res.data)
					this.updateMsgStatus(id)
				}).finally(() => {
					uni.hideLoading()
				})
			},
			//将消息状态改为已读
			updateMsgStatus(id) {
				const userId = this.$store.getters?.userInfo?.id
				const data = {
					user_id: userId,
					notice_id: id
				}
				updateMsgStatus(data)
			},
			goto() {
				uni.navigateTo({
					url: "/pages/home/components/editReport"
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding-top: 126rpx;
		padding-bottom: 48rpx;
		background-color: #f3f4f6;

		.inner-content {
			padding: 24rpx;
			font-color: #101010;
			margin: 24rpx;
			border-radius: 12rpx;

			.item-content {
				.item-title {
					color: #2979ff;
					font-size: 32rpx;
					margin-bottom: 24rpx;
				}

				.item-children {
					display: flex;
					flex-wrap: wrap;

					.item-name {
						margin-right: 24rpx;
						margin-bottom: 24rpx;
					}
				}

			}

		}
	}
</style>